
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Mootools Drag and Drop Example</title>

<style type="text/css">
/* 基础选择器 */
/* 标签选择器 */
div{
  width: 200px;
  height: 200px;
  border: 1px solid black;
}
/* id选择器 */
#dragger{
  background: blue;
}
/* class选择器 */
.item1{
  background-color: blueviolet;
}
/* 后代 选择器 选择器 */
#div1 span{
  color: red;
  font-size: 20px;
}
/* 子元素 选择器>选择器 */
#div1>p{
  display: block;
  width: 100px;
  height: 20px;
  background-color: aqua;
}
/* 并集标签 标签#id  标签.class */
div.item1{
  color:blanchedalmond;
}

p[class='item1']{
  font-size: 30px;
}

/* nth-child()  */
#div1>p:nth-child(2){
  background-color: yellow;
}

</style>
</head>
<body>
  <h1>Mootools Drag and Drop example</h1>
  <p>
      <a href="#">See related post</a>
  </p>

  <div id="dragger">Drag me</div>
  <div class="item1">Item 1</div>
  <div class="item2">Item 2</div>
  <div class="item3">Item 3</div>
  <div class="item4">Item 4</div>

  <p class='item1'>pppp</p>

  <div id="div1">
    <div>div-sub1</div>
    <div>div-sub2</div>
    <p class="p1">
      <span>span1</span>
    </p>
    <p class="p2">
      <span>span2</span>
    </p>
  </div>
</body>
</html>